<script setup>
import { defineProps, computed, defineEmits } from 'vue';
import dayjs from 'dayjs';
import { useUserInfoStore } from '../../stores/userInfo';
const props = defineProps({
    userInfo: Object,
})
const userInfoStore = useUserInfoStore();
const emit = defineEmits(['cancelreservation'])
//渲染页面返回所需数据
function getInfo(info) {
    if (Object.keys(props.userInfo).length === 0 || !props.userInfo || !props.userInfo.reservation)
        return '';
    if (info === 'seat_id')
        return props.userInfo.reservation.seat_id;
    if (info === 'reservation_date') 
        return dayjs(props.userInfo.reservation.reservation_date).format('YYYY年MM月DD日 HH:mm');
    if (info === 'reservation_status')
        return props.userInfo.reservationStatus
    if (info === 'reservation_time')
        return props.userInfo.reservation.reservation_status + '小时';
    return '';
}
// 获取样式
function getStyle() {
    let color = '#000';
    if (getInfo('reservation_status') === '申请中...')
        color = '#000';
    else if (getInfo('reservation_status') === '已接受')
        color = '#188c18';
    else if (getInfo('reservation_status') === '已拒绝')
        color = 'red';

    return `color:${color}`
}
const color = computed(() => getStyle())

//取消预约
async function cancelReservaiton() {
    let a = confirm('确定取消预约？');
    if (a === true) {
        const res = await userInfoStore.cancelReservation({
            id: getInfo('seat_id')
        });
        ElMessage.success(res.message)
        setTimeout(() => {
            location.reload()
        }, 1000)
    }
}
</script>
<template>
    <div class="reservation-table main">
        <div class="reservation-table-title">
            <h2>预约表</h2>
        </div>
        <div class="reservation-table-content">
            <table>
                <tr>
                    <th>座位号</th>
                    <th>预约时间</th>
                    <th>预约时长</th>
                    <th>预约状态</th>
                    <th>操作</th>
                </tr>
                <tr class="reservation-content-inner">
                    <td>{{ getInfo('seat_id') }}</td>
                    <td>{{ getInfo('reservation_date') }}</td>
                    <td>{{ getInfo('reservation_time') }}</td>
                    <td :style="color">{{ getInfo('reservation_status') }}</td>
                    <td><a href="#" @click="cancelReservaiton()">取消预约</a></td>
                </tr>
            </table>
        </div>
    </div>
</template>

<style>
.reservation-table {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.reservation-table-title {
    text-align: center;
    margin-bottom: 20px;
}

.reservation-table-content table {
    width: 100%;
    border-collapse: collapse;
}

.reservation-table-content th,
.reservation-table-content td {
    border: 1px solid #ccc;
    text-align: center;
}

.reservation-table-content th {
    background-color: #f2f2f2;
}
</style>